<template>
	<view class="content">
		<view class="banner shadow shadow-lg bg-lx-blue">
			<view class="search">
				<u-search @click="gotosearch" :disabled="true" :show-action="false" placeholder="请输入家乡地址"></u-search>
			</view>
		</view>
		<!-- <image  @click="logoTap()" class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view> -->
		<view class="myimg">
			<image @tap="govip" :src="`../../static/vip_small.svg`" mode="scaleToFill"
				style="width:345px;height:150upx;"></image>
		</view>
		<view class="hot-place">
			<view class="tag-text u-flex justify-between u-padding-20">
				<text class="u-font-xl" style="font-weight: 800;">当季热门</text><text class="more"
					@click="gotomore">更多</text>
			</view>
			<view class="city-list u-flex u-padding-20 justify-between">
				<view v-for="(item,index) in citylist" style="position: relative;">
					<image @click="logoTap(item)" border-radius="10" style="width: 200upx;height: 250upx;"
						mode="aspectFill" :src="item.cover_url" :key="index">
					</image>
					<text class="test_demo"
						style="position: absolute;  bottom: 25upx;  padding: 0 5upx; left: 25upx;  color: white; background-color: rgba(0, 0, 0, 0.7);">{{item.city_desc}}</text>
					<text
						style="position: absolute; bottom: 65upx;  left: 75upx; color: white;">{{item.city_name}}</text>
				</view>
			</view>
		</view>

		<view class="jingdian-list">
			<view class="tag-text  u-padding-20">
				<text class="u-font-xl" style="font-weight: 800;">热门景点</text>
			</view>
			<view class="project-item" @click="gotoDetail(item)" v-for="(item,index) in jingdianList" :key="index">
				<view class="project-img-title padding-sm">
					
						<image class="flex-img"  :src="`${item.cover_url}`" mode="aspectFill" >
						</image>
					

					<view class="project-title margin-left u-font-lg">
						<view>{{item.jingdian_name}}</view>
						<view class="u-font-sm text-gray u-m-t-25">{{item.jingdian_desc}}</view>

						<view class="project-bottom u-flex u-font-sm u-m-t-25">
							<view class="">
								<text class="text-orange ">{{item.lookCount}}</text> 人看过
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>

		<page-tabpars></page-tabpars>
	</view>
</template>

<script>
	import alldata from '../../data/alldata.json'

	export default {
		data() {
			return {
				citylist: [{
						"uuid": "1",
						"city_name": "北京",
						"city_desc": "首都之美",
						"order_num": 1,
						"is_hot": 1,
						"cover_url": "https://hui-sdk.oss-cn-beijing.aliyuncs.com/jingdian/city_cover/bj.png",
						"app_cover_url": "https://hui-sdk.oss-cn-beijing.aliyuncs.com/jingdian/city_cover/app_bj.png"
					},
					{
						"uuid": "5",
						"city_name": "四川",
						"city_desc": "天府之国，吃香喝辣",
						"order_num": 5,
						"is_hot": 1,
						"cover_url": "https://hui-sdk.oss-cn-beijing.aliyuncs.com/jingdian/city_cover/sc.png",
						"app_cover_url": "https://hui-sdk.oss-cn-beijing.aliyuncs.com/jingdian/city_cover/app_sc.png"
					},
					{
						"uuid": "20",
						"city_name": "湖北",
						"city_desc": "两千年赤壁览黄鹤风流",
						"order_num": 3,
						"is_hot": 1,
						"cover_url": "https://hui-sdk.oss-cn-beijing.aliyuncs.com/jingdian/city_cover/hubei.png",
						"app_cover_url": "https://hui-sdk.oss-cn-beijing.aliyuncs.com/jingdian/city_cover/app_hubei.png"
					}
				],
				jingdianList: [{
						"uuid": "E4A7B5FF-CF0B-453C-A410-79B6F97800A2",
						"id_city": "1",
						"city_name": "北京",
						"jingdian_name": "故宫",
						"jingdian_desc": "北京市东城区景山前街4号",
						"cover_url": "https://hui-sdk.oss-cn-beijing.aliyuncs.com/jingdian/city_hot/beijing_gugong.jpg",
						"jingdian_url": "https://www.quanjingke.com/jq/llqd/138/41",
						"order_num": 1,
						"is_index": 0,
						"come_from": "全景客",
						"is_inactive": 0,
						"longitude": "116.403322",
						"latitude": "39.928678",
						"is_shoucang": 0,
						"lookCount": "30万+"
					},
					{
						"uuid": "84AC5FBD-619A-4D96-904A-72A2E3EC1B36",
						"id_city": "11",
						"city_name": "山西",
						"jingdian_name": "乔家大院",
						"jingdian_desc": "山西省晋中市祁县东观镇乔家堡村",
						"cover_url": "https://hui-sdk.oss-cn-beijing.aliyuncs.com/jingdian/city_hot/shanxi_qiaojiadayuan.jpg",
						"jingdian_url": "http://www.quanjingke.com/jq/llqd/374/41",
						"order_num": 1,
						"is_index": 0,
						"come_from": "全景客",
						"is_inactive": 0,
						"longitude": "112.445706",
						"latitude": "37.41338",
						"is_shoucang": 0,
						"lookCount": "26万+"
					},
					{
						"uuid": "04DEF638-6F26-4513-8DC2-5E0A68A39970",
						"id_city": "12",
						"city_name": "安徽",
						"jingdian_name": "黄山风景区",
						"jingdian_desc": "安徽省黄山市黄山区205国道",
						"cover_url": "https://hui-sdk.oss-cn-beijing.aliyuncs.com/jingdian/city_hot/anhui_huangshanfengjingqu.jpg",
						"jingdian_url": "https://www.quanjingke.com/jq/llqd/1179/41",
						"order_num": 1,
						"is_index": 0,
						"come_from": "全景客",
						"is_inactive": 0,
						"longitude": "118.168089",
						"latitude": "30.130390",
						"is_shoucang": 0,
						"lookCount": "21万+"
					},
					{
						"uuid": "605FE724-2348-485E-AE20-1DEA82931426",
						"id_city": "33",
						"city_name": "海外",
						"jingdian_name": "法国凡尔赛宫",
						"jingdian_desc": "位于法国巴黎西南郊外伊夫林省省会凡尔赛镇，是巴黎著名的宫殿之一，也是世界五大宫殿之一。",
						"cover_url": "https://hui-sdk.oss-cn-beijing.aliyuncs.com/jingdian/city_hot/haiwai_faguofanersaigong.jpg",
						"jingdian_url": "http://data.taagoo.com/pano/20170903507473.html?startscene=scene_58706&",
						"order_num": 0,
						"is_index": 0,
						"come_from": "动景游",
						"is_inactive": 0,
						"longitude": "2.133986",
						"latitude": "48.800616",
						"is_shoucang": 0
					},
					{
						"uuid": "E63E98B3-4460-4236-87A7-9446067FDBDE",
						"id_city": "22",
						"city_name": "贵州",
						"jingdian_name": "赤水市侏罗纪公园",
						"jingdian_desc": "距赤水城区40公里，紧依赤习公路，傍临赤水河，地处红军长征路，海拔290～1730米",
						"cover_url": "https://hui-sdk.oss-cn-beijing.aliyuncs.com/jingdian/city_hot/guizhou_chishuishizhuluojigongyuan.jpg",
						"jingdian_url": "https://www.quanjingke.com/jq/llqd/1168/41",
						"order_num": 200,
						"is_index": 0,
						"come_from": "全景客",
						"is_inactive": 0,
						"longitude": "105.999852",
						"latitude": "28.453708",
						"is_shoucang": 0,
						"lookCount": "9万+"
					}
				]
			}
		},
		onLoad() {


		},
		onShow() {
			this.$u.vuex('active', 'index')
		},
		mounted() {

		},
		methods: {
			gotomore() {
				this.$goNavWindow('/pages/china/china')
			},
			gotosearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			govip() {
				this.$goWindow('../vip/vip')

			},
			gotoDetail(item) {
				// 跳转到内部窗口并且传递链接
				uni.navigateTo({
					url: `/pages/webview/webview?url=${item.jingdian_url}&title=${item.jingdian_name}`
				})
			},
			logoTap(item) {

				// 跳转到内部窗口并且传递链接
				uni.navigateTo({
					url: `/pages/listPage/listPage?cityId=${item.uuid}&title=${item.city_name}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myimg {
		position: absolute;
		width: 100%;
		text-align: center;
		top: 150upx;
		z-index: 100;
	}

	.hot-place {
		margin-top: 130upx;
		width: 100%;
		background-color: #FFFFFF;
	}

	.project-item {
		.project-img-title {
			display: flex;

			.flex-img {
				flex: 1;
				height: 180upx;
				width: 180upx;
				border-radius: 5upx;
			}

			.project-title {
				font-size: 15px;
				font-weight: 545;
				flex: 1;
			}
		}
	}



	.jingdian-list {
		margin-top: 30upx;
		width: 100%;
		background-color: #FFFFFF;
	}

	.test_demo {
		text-overflow: ellipsis; //值为clip表示剪切，ellipsis时为显示省略号
		overflow: hidden;
		white-space: nowrap;
		width: 150upx;
		border-radius: 10upx;
		text-align: center;
	}

	.search {
		position: absolute;
		top: 60upx;
		width: 100%;
		margin: 0 auto;
		padding: 0 20upx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.banner {
		height: 200upx;
		width: 100%;
		position: relative;
	}

	.bg-lx-blue {
		background-image: linear-gradient(top, #0081ff, #6879da);
	}
</style>
